<template>
  <div class="user-card">
    <img class="user-avatar" :src="props.avatar" alt="" />
    <div class="user-name">{{ userName }}</div>
    <div class="user-amount">
      <div class="amount">
        <div class="card-label flex flex-start">
          <img class="card-bag" src="@/assets/images/home_icon_rmb.png" alt="" />
          <div class="card-label">购物金余额</div>
        </div>
        <div class="card-value flex flex-start">
          <div class="card-unit">￥</div>
          <div class="card-price">{{ props.amount || '' }}</div>
        </div>
      </div>
      <div class="record" @click="handleRecord">记录</div>
    </div>
    <div class="user-switch" @click="handleChangeUser">
      <div class="switch">切换账号</div>
      <img class="refresh-icon" src="@/assets/images/refresh.png" alt="" srcset="" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ofuscateMobile } from '@/utils/utils'
import { computed } from 'vue'

interface UserCardProps {
  amount: number
  mobile: string
  avatar: string
}
const emit = defineEmits<{
  (e: 'on-record', value: string): void
  (e: 'on-change-user', value: string): void
}>()
const props = withDefaults(defineProps<UserCardProps>(), {
  amount: 0,
  mobile: '',
  avatar: '',
})
const userName = computed(() => {
  if (props.mobile) {
    return `会员用户${ofuscateMobile(props.mobile)}`
  }
  return '会员用户'
})
const handleChangeUser = () => {
  emit('on-change-user', '')
}
const handleRecord = () => {
  emit('on-record', '')
}
</script>
<style scoped lang="scss"></style>
